<template>
  <div class="cat">
    <div>
      <el-select v-model="catStat1" placeholder="请选择" style="position: absolute;left: 150px;width: 100px;">
        <el-option v-for="item in options" :key="item.catCode" :label="item.catName" :value="item.catCode">
        </el-option>
      </el-select>
      <el-input v-model="str" placeholder="根据分类名称查询" style="width: 300px; position: absolute; left: 270px;"></el-input>
      <el-button @click="so" style="position: absolute;left: 600px;">查询</el-button>
      <el-button @click="addCat" style="position: absolute;left: 670px;">新增</el-button>
      <el-button @click="deleteCat" style="position: absolute;left: 750px;">删除</el-button>
      <el-button @click="reload" style="position: absolute;left: 830px;">刷新</el-button>
    </div>
    <div class="table1">
      <el-table :data="productCatInfo" border :row-class-name="tableRowClassName" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <!-- 表格中多选框组件 -->
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="catName" label="小类名称" width="140">
        </el-table-column>
        <el-table-column prop="pcatName" label="所属大类" width="140">
        </el-table-column>
        <el-table-column prop="catLvl" label="所属级别" width="120">
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="120">
        </el-table-column>
        <el-table-column prop="isShow" label="是否显示" width="120">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="updateCat(scope.row.catCode)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="productCatInfoPage.current" :page-sizes="[1,2,3]" :page-size="productCatInfoPage.size"
        layout="total, sizes, prev, pager, next, jumper" :total="productCatInfoPage.total">
      </el-pagination>
    </div>
    <!-- 新增 -->
    <el-dialog title="商品小类新增" :visible.sync="dialogVisible1" width="50%" :before-close="handleClose">

      <el-form :model="productCatXForm" :rules="rules" ref="productCatXForm" label-width="100px">
        <el-form-item label="分类名称" prop="catName" style="width: 350px;">
          <el-input v-model="productCatXForm.catName"></el-input>
        </el-form-item>
        <el-form-item label="所属大类" prop="pcatName">
            <el-select v-model="productCatXForm.pcatName" placeholder="请选择上级分类" style="position: absolute;left: 0px;width: 250px;">
              <el-option v-for="item in options" :key="item.catCode" :label="item.catName" :value="item.catName">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="单位" prop="unit" style="width: 350px;">
          <el-input v-model="productCatXForm.unit"></el-input>
        </el-form-item>
        <el-form-item v-for="(domain, index) in productCatXForm.evalPicDef1" :label="'鉴定图定义' + index" :key="domain.key"
          :prop="'evalPicDef1.' + index + '.pictype'"
              :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
              }">
          <el-input v-model="domain.pictype" style="position: absolute;width: 200px;left: 0;" :disabled="index in ps"></el-input>
          <!-- 下拉框 -->
          <el-select v-model="domain.flat" placeholder="请选择" :disabled="index in ps">
              <el-option
                v-for="dom in options1"
                :key="dom.value"
                :label="dom.label"
                :value="dom.value">
              </el-option>
            </el-select>
          <el-button @click.prevent="removeDomain(domain)" style="position: absolute;left: 420px;" :disabled="index in ps">删除</el-button>
        </el-form-item>
          <el-button @click="addDomain">新增选项</el-button><br><br />
          <el-form-item label="分类描述" prop="catDesc">
            <el-input type="textarea" v-model="productCatXForm.catDesc"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isShow">
              <el-radio-group v-model="productCatXForm.isShow">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('productCatXForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx1">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="商品小类修改" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">

      <el-form :model="uproductCatXForm" :rules="rules" ref="uproductCatXForm" label-width="100px">
        <el-form-item label="分类名称" prop="catName" style="width: 350px;">
          <el-input v-model="uproductCatXForm.catName"></el-input>
        </el-form-item>
        <el-form-item label="所属大类" prop="pcatName">
            <el-select v-model="uproductCatXForm.pcatName" placeholder="请选择上级分类" style="position: absolute;left: 0px;width: 250px;">
              <el-option v-for="item in options" :key="item.catCode" :label="item.catName" :value="item.catName">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="单位" prop="unit" style="width: 350px;">
          <el-input v-model="uproductCatXForm.unit"></el-input>
        </el-form-item>
        <el-form-item v-for="(domain, index) in uproductCatXForm.evalPicDef1" :label="'鉴定图定义' + index" :key="domain.key"
          :prop="'evalPicDef1.' + index + '.pictype'"
              :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
              }">
          <el-input v-model="domain.pictype" style="position: absolute;width: 200px;left: 0;" :disabled="index in os"></el-input>
          <!-- 下拉框 -->
          <el-select v-model="domain.flat" placeholder="请选择" :disabled="index in os">
              <el-option
                v-for="dom in options1"
                :key="dom.value"
                :label="dom.label"
                :value="dom.value">
              </el-option>
            </el-select>
          <el-button @click.prevent="removeDomain2(domain)" style="position: absolute;left: 420px;" :disabled="index in os">删除</el-button>
        </el-form-item>
          <el-button @click="addDomain2">新增选项</el-button><br><br />
          <el-form-item label="分类描述" prop="catDesc">
            <el-input type="textarea" v-model="uproductCatXForm.catDesc"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isShow">
              <el-radio-group v-model="uproductCatXForm.isShow">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm2('uproductCatXForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx2">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "categoriesx",
    data() {
      return {
        productCatInfoPage: {},
        productCatInfo: [],
        options:[],
        catStat1:"",
        str:"",
        ischecked:[],
        dialogVisible1:false,
        dialogVisible:false,
        os:[],
        ps:[],
        options1:[{
          value: '0',
          label: '可选'
        }, {
          value: '1',
          label: '必选'
        }],

        uproductCatXForm:{
          catCode:"",
          catName:"",
          pcatName:"",
            catDesc:"",
            unit:"",
            isShow:"",
            //json字符串
            evalPicDef:"",
            evalPicDef1:[
            //鉴定图定义
            {
              pictype: "正面",
              flat:'1'
            },
            {
              pictype: "背面",
              flat:'1'
            }
          ],
        },
        productCatXForm:{
          catName:"",
          pcatName:"",
            catDesc:"",
            unit:"",
            isShow:"",
            //json字符串
            evalPicDef:"",
            evalPicDef1:[
            //鉴定图定义
            {
              pictype: "正面",
              flat:'1'
            },
            {
              pictype: "背面",
              flat:'1'
            }
          ],
        },
        rules: {
          catName: [{
              required: true,
              message: '请输入分类名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 2 到 5 个字符',
              trigger: 'blur'
            }
          ],
          pcatName:[{
            required: true,
            message: '请选择所属大类',
            trigger: 'change'
          }],
          catDesc:[{
            required: true,
            message: '请输入分类描述',
            trigger: 'blur'
          }],
          unit:[{
            required: true,
            message: '请输入单位',
            trigger: 'blur'
          }],
          isShow:[{
            required: true,
            message: '是否展示',
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      //修改
      submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送新增请求
            let s = JSON.stringify(this.uproductCatXForm.evalPicDef1);
            this.uproductCatXForm.evalPicDef=s;
            this.$http.post("pawnProductCat/updataXProductCat",this.uproductCatXForm).then(resp=>{
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      addDomain2() {
        this.uproductCatXForm.evalPicDef1.push({
          pictype: "",
          flat:'1'
        });
      },
      removeDomain2(item) {
        var index = this.uproductCatXForm.evalPicDef1.indexOf(item)
        if (index !== -1) {
          this.uproductCatXForm.evalPicDef1.splice(index, 1)
        }
      },
      updateCat(catCode){
        //根据catCode查询小类
        this.uproductCatXForm.catCode = catCode;
        this.$http.get("pawnProductCat/getXProductByCatCode",{params:{catCode:catCode}}).then(resp=>{
          this.uproductCatXForm.catName = resp.data.data.catName;
          this.uproductCatXForm.pcatName = resp.data.data.pcatName;
          this.uproductCatXForm.catDesc = resp.data.data.catDesc;
          this.uproductCatXForm.unit = resp.data.data.unit;
          this.uproductCatXForm.isShow = resp.data.data.isShow;
          this.uproductCatXForm.evalPicDef1=JSON.parse(resp.data.data.evalPicDef);
          let l = this.uproductCatXForm.evalPicDef1.length;
          for(let i = 0; i<l;i++){
            this.os.push(i);
          }
        })
        this.dialogVisible=true;
      },
      qx2(){
        this.dialogVisible = false;
        location.reload();
      },

      //新增
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //不为空发送新增请求
            let s = JSON.stringify(this.productCatXForm.evalPicDef1);
            this.productCatXForm.evalPicDef=s;
            this.$http.post("pawnProductCat/saveXProductCat",this.productCatXForm).then(resp=>{
              alert(resp.data.message);
              location.reload();
            })
          } else {
            return false;
          }
        });
      },
      addDomain() {
        this.productCatXForm.evalPicDef1.push({
          pictype: "",
          flat:'1'
        });
      },
      removeDomain(item) {
        var index = this.productCatXForm.evalPicDef1.indexOf(item)
        if (index !== -1) {
          this.productCatXForm.evalPicDef1.splice(index, 1)
        }
      },
      addCat(){
        this.dialogVisible1=true;
        this.getAllDProductCatCodeAN();
      },
      handleClose(done) {
        location.reload();
      },
      qx1(){
        this.dialogVisible1 = false;
        location.reload();
      },
      handleSelectionChange(checked) {
        this.ischecked = checked
      },
      deleteCat() {
        this.$http.post("pawnProductCat/deleteXProductCat",{isChecked:this.ischecked}).then(resp=>{
          alert(resp.data.message);
          location.reload();
        })
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.isShow === '否') {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      },
      reload() {
        location.reload();
      },
      handleSizeChange(size){
        if(this.str==""&&this.catStat1==""){
          //全查询
          this.getAllXProductCat(this.productCatInfoPage.current,size);
        }else if(this.str!=""&&this.catStat1==""){
          this.getProductCatByStr(this.productCatInfoPage.current,size);
        }else if(this.str==""&&this.catStat1!=""){
          this.getProductCatByD(this.productCatInfoPage.current,size);
        }else{
          this.getXProductCatByDAndLike(this.productCatInfoPage.current,size);
        }
      },
      handleCurrentChange(current){
        if(this.str==""&&this.catStat1==""){
          this.getAllXProductCat(current,this.productCatInfoPage.size);
        }else if(this.str!=""&&this.catStat1==""){
          this.getProductCatByStr(current,this.productCatInfoPage.size);
        }else if(this.str==""&&this.catStat1!=""){
          this.getProductCatByD(current,this.productCatInfoPage.size);
        }else{
          this.getXProductCatByDAndLike(current,this.productCatInfoPage.size);
        }
      },
      getAllXProductCat(currentPage, pagesize) {
        this.str="";
        this.catStat1="";
        this.$http.get("pawnProductCat/getAllXProductCat", {
          params: {
            current: currentPage,
            size: pagesize
          }
        }).then(resp => {
          this.productCatInfoPage = resp.data.data;
          this.productCatInfo = resp.data.data.records;
        })
      },
      getAllDProductCatCodeAN(){
        this.$http.get("pawnProductCat/getAllProductCat").then(resp=>{
          //获取所有大类id和大类名
          this.options = resp.data.data.records;
        })
      },
      getProductCatByD(currentPage, pagesize){
        this.str="";
        this.$http.get("pawnProductCat/getXProductCatByD",{params: {catCode:this.catStat1,current: currentPage,size: pagesize}}).then(resp=>{
            this.productCatInfo = resp.data.data.records;
            this.productCatInfoPage = resp.data.data;
        })
      },
      so(){
        this.getAllXProductCat(1,3);
      },
      getProductCatByStr(currentPage, pagesize){
        this.catStat1="";
        this.$http.get("pawnProductCat/getXProductCatByLike",{params: {str:this.str,current: currentPage,size: pagesize}}).then(resp=>{
          if(resp.data.code==200){
            this.productCatInfo = resp.data.data.records;
            this.productCatInfoPage = resp.data.data;
          }else{
            alert(resp.data.message);
            location.reload();
          }
        })
      },
      getXProductCatByDAndLike(currentPage, pagesize){
        //根据分类和模糊同时查询
        this.$http.get("pawnProductCat/getXProductCatByDAndLike",{params: {str:this.str,catCode:this.catStat1,current: currentPage,size: pagesize}}).then(resp=>{
          if(resp.data.code==200){
            this.productCatInfo = resp.data.data.records;
            this.productCatInfoPage = resp.data.data;
          }else{
            alert(resp.data.message);
            location.reload();
          }
        })
      },
      getDProductCatByCatName(){
        this.$http.get("pawnProductCat/getDProductCatByCatName",{params:{catName:this.productCatXForm.pcatName}}).then(resp=>{
          this.productCatXForm.evalPicDef1=JSON.parse(resp.data.data.evalPicDef);
          let l = this.productCatXForm.evalPicDef1.length;
          for(let i = 0; i<l;i++){
            this.ps.push(i);
          }
        })
      }
    },
    created() {
      this.getAllXProductCat(1, 3);
      this.getAllDProductCatCodeAN();
    },
    watch:{
      "catStat1":function(){
          if(this.str==""){
            this.getProductCatByD(1,2);
          }else{
            this.getXProductCatByDAndLike(1,2);
          }
      },
      "str":function(){
          if(this.catStat1==""){
            this.getProductCatByStr(1,2);
          }else{
            this.getXProductCatByDAndLike(1,2);
          }
      },
      "productCatXForm.pcatName":{
          handler() {
            this.getDProductCatByCatName();
          },
      }
    }
  }
</script>

<style>
  .table1 {
    position: absolute;
    top: 100px;
    left: 150px;
  }

  .el-table .warning-row {
    background: yellow;
  }

  .block {
    position: absolute;
    top: 400px;
    left: 300px;
  }
  .cat{
    text-align: center;
  }
</style>
